<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>添加角色</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-form" style="padding: 20px 0 0 0;">
  <div class="layui-form-item" style="display: none" th:if="${adm != null}">
    <label class="layui-form-label">ID</label>
    <div class="layui-input-inline">
      <input type="hidden" id="role_name" th:value="${role.name}">
      <input type="hidden" id="role_id" name="role_id" th:value="${role.id}">
      <input th:value="${adm.id}" type="text" name="id" id="id" lay-verify="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div  class="layui-form-item" th:if="${adm==null}">
    <label class="layui-form-label">初始密码</label>
    <div class="layui-input-inline">
      <input value="123456" type="text" name="password" id="password" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
      <input th:value="${adm!=null}?${adm.name}" type="text" name="name" id="name" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      <span id = "nameInfo"></span>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    <div class="layui-input-inline">
      <input name="img" lay-verify="required" id="img" placeholder="图片地址"
             th:value="${adm!=null}?${adm.img}"
             class="layui-input">
    </div>
    <div class="layui-input-inline layui-btn-container" style="width: auto;">
      <button type="button" class="layui-btn layui-btn-primary" id="upload">
        <i class="layui-icon">&#xe67c;</i>上传图片
      </button>
      <button class="layui-btn layui-btn-primary" id="showbtn">查看图片
      </button>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">手机</label>
    <div class="layui-input-inline">
      <input type="text" name="phone" th:value="${adm!=null}?${adm.phone}" lay-verify="phone" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-inline">
      <input type="text" name="email" th:value="${adm!=null}?${adm.email}" lay-verify="email" autocomplete="off"
             class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block" th:if="${adm == null || adm.sex eq '男'}">
      <input type="radio" name="sex" value="男" title="男" checked>
      <input type="radio" name="sex" value="女" title="女">
    </div>
    <div class="layui-input-block" th:if="${adm != null && adm.sex eq '女'}">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">角色</label>
    <div class="layui-input-inline">
      <select name="role" lay-verify="" id="role">
      </select>
    </div>
  </div>
  <div class="layui-form-item layui-hide">
    <input type="button" lay-submit lay-filter="addAdmin" id="addAdmin" value="确认">
  </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'layer', 'upload', 'form'], function () {
        var $ = layui.$,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload;

        $.ajax({
            url:"/role/selectRoleList",
            type:"GET",
            dataType:"json",
            success:function(result){
                var list = result;    //返回的数据
                for(var i=0;i<list.length;i++){
                    if ($("#role_name").val() == list[i].name) {
                        $("#role").append("<option value="+list[i].id+" selected>"+list[i].name+"</option>");
                    }else {
                        $("#role").append("<option value="+list[i].id+">"+list[i].name+"</option>");
                    }
                }
                form.render("select");                                // 刷性select，显示出数据
            }
        });

        $('#showbtn').on('click', function () {
            layer.photos(
                {photos: {title: "查看头像", data: [{src: $("#img").val()}]}, shade: .01, closeBtn: 1, anim: 5}
            )
            return false;
        });
        //执行实例
        var uploadInst = upload.render({
            elem: '#upload' //绑定元素
            , url: '/upload' //上传接口
            , done: function (res) {
                //上传完毕回调
                if (res.code == 200) {
                    $("#img").val(res.msg);
                    layer.msg('图片上传成功',
                        {
                            icon: 1,
                            time: 800
                        });
                } else {
                    layer.msg('图片上传失败');
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
    });
    $('#name').blur(function () {
        var name = $(this).val();
        if (name != null) {
            $.ajax({
                type:"get",
                contentType : 'application/json',
                url:"/checkAdminName",
                data:{"name":name},
                dataType : 'json',
                success:function(data) {
                    var usernameInfo = "";
                    if(data.code == 500){
                        usernameInfo = "该用户名可以使用";
                        $("#nameInfo").css("color","green");
                    }else{
                        usernameInfo = "该用户名已被使用";
                        $("#nameInfo").css("color","red");
                    }
                    $("#nameInfo").html(usernameInfo);
                }
            });
        }
    });
</script>
</body>
</html>